<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--link rel="icon" type="image/png" href="./img/icon.png" /-->
<title>CDPNP Tools - V2.5</title>

<link rel="stylesheet" href="./libs/bulma-0.9.4.css">
<!-- fix sub border missing by override bulma css -->
<style>
.content table tbody tr:last-child td {
    border-bottom-width: 1px;
}
.content table tbody tr:last-child > td {
    border-bottom-width: 0;
}
</style>

</head>
<body>

<section class="section">
    <div class="container">
        <h1 class="title is-size-4">CDPnP</h1>
        <button class="button is-small" id="btn_load_csv">Load CSV</button>
        <button class="button is-small" id="btn_export_prj">Export Project</button>
        <button class="button is-small" id="btn_import_prj">Import Project</button> &nbsp;|&nbsp;
        <button class="button is-small" id="btn_reset_cfg">Reset Config</button>
        <button class="button is-small" id="btn_export_cfg">Export Config</button>
        <button class="button is-small" id="btn_import_cfg">Import Config</button> &nbsp;|&nbsp;
        <button class="button is-small" id="btn_save_cfg">Save Config & Project</button>
        <br><br>
        
        <span style="display: inline-block; min-width: 70px;">Cur pos:</span> <span id="cur_pos">--</span>
        <br>
        <span style="display: inline-block; min-width: 70px;">Aux pos:</span> <span id="aux_pos">--</span>
        &nbsp;
        <button class="button is-small" id="btn_reset_aux">Reset aux</button>
        <br><br>
        
        <button class="button is-small" onclick="move_button([-1, 0, 0, 0])"><-</button>
        <button class="button is-small" onclick="move_button([ 1, 0, 0, 0])">-></button>
        <button class="button is-small" onclick="move_button([0, -1, 0, 0])">^</button>
        <button class="button is-small" onclick="move_button([0,  1, 0, 0])">v</button>
        <button class="button is-small" onclick="move_button([0, 0,  1, 0])">Up</button>
        <button class="button is-small" onclick="move_button([0, 0, -1, 0])">Down</button>
        <button class="button is-small" onclick="move_button([0, 0, 0, -1])">CCW</button>
        <button class="button is-small" onclick="move_button([0, 0, 0,  1])">CW</button>
        &nbsp;
        <select id="move_speed">
            <option value="1">x1</option>
            <option value="2">x2</option>
            <option value="3" selected>x3</option>
            <option value="4">x4</option>
        </select> Step Size
        &nbsp;
        <select id="motor_speed" onchange="input_change()">
            <option value="0.1">10%</option>
            <option value="0.2">20%</option>
            <option value="0.3">30%</option>
            <option value="0.4">40%</option>
            <option value="0.5" selected>50%</option>
            <option value="0.6">60%</option>
            <option value="0.7">70%</option>
            <option value="0.8">80%</option>
            <option value="0.9">90%</option>
            <option value="1">100%</option>
        </select> Motor Speed
        <br>
        <br>
        <button class="button is-small" onclick="btn_select_step(0)" id="btn_step0">Show target</button> >
        <button class="button is-small" onclick="btn_select_step(1)" id="btn_step1">Goto comp</button> >
        <button class="button is-small" onclick="btn_select_step(2)" id="btn_step2">Snap</button> >
        <button class="button is-small" onclick="btn_select_step(3)" id="btn_step3">Pickup</button> >
        <button class="button is-small" onclick="btn_select_step(4)" id="btn_step4">Check</button> >
        <button class="button is-small" onclick="btn_select_step(5)" id="btn_step5">Goto pcb</button> >
        <button class="button is-small" onclick="btn_select_step(6)" id="btn_step6">Put down</button>
        &nbsp;|&nbsp;
        <label class="checkbox"><input type="checkbox" id="pause_en"> Pause</label>
        <button class="button is-small" id="btn_stop" disabled>Stop</button>
        <button class="button is-small" id="btn_run">Run</button>
        <br>
        
        
        <br>
        <label class="checkbox"><input type="checkbox" id="pump_en"> Enable pump</label>
        &nbsp;
        Camera
        <select id="camera_dev">
            <option value="1" selected>1</option>
            <option value="2">2</option>
        </select>
        <select id="camera_detect">
            <option value="default" selected>Default</option>
            <option value="limit_angle">Limit angle</option>
            <option value="">-- None --</option>
            <option value="cali_nozzle_13_4">Cali nozzle 502</option> <!-- Φ13mm ±4mm -->
            <option value="cali_nozzle_22_4">Cali nozzle 503</option>
            <option value="cali_nozzle_37_6">Cali nozzle 504</option>
            <option value="cali_nozzle_49_6">Cali nozzle 506</option>
        </select>
        <label class="checkbox"><input type="checkbox" id="camera_en"> Enable</label>
        <label class="checkbox"><input type="checkbox" id="camera_light1">_<input type="checkbox" id="camera_light2"> Light</label>
        <button class="button is-small" onclick="camera_update_bg()">New BG</button>
        <button class="button is-small" onclick="camera_remove_bg()">Del BG</button>
        &nbsp;
        <label class="checkbox"><input type="checkbox" id="show_target"> Show target</label>
        <label class="checkbox"><input type="checkbox" id="check2_en"> 2nd check</label>
        <label class="checkbox"><input type="checkbox" id="putdown_en" checked> Put down</label>
        
        <br>
        <button class="button is-small goto_btn" id="btn_cali_offset">Calibration Offset</button> &nbsp;|&nbsp;
        <button class="button is-small goto_btn" id="btn_cali_nozzle">Calibration Nozzle</button>
        Exposure: <input type="text" size="5" id="nozzle_expos" onchange="input_change()">
        Threshold: <input type="text" size="5" id="nozzle_thresh" onchange="input_change()">
        <label class="checkbox"><input type="checkbox" id="vision_debug_en"> Debug</label>
        <button class="button is-small goto_btn" id="btn_update_vision">Set</button>
        <br>
        <span style="display: inline-block; min-width: 138px;">Grab offset:</span>
        <input type="text" id="grab_ofs" onchange="input_change()">
        <button class="button is-small goto_btn" onclick="btn_grab_ofs(null, 1)"><-</button>
        <button class="button is-small goto_btn" onclick="btn_grab_ofs(null, -1)">-></button>
        <br>
        <span style="display: inline-block; min-width: 138px;">Nozzle cali (0°):</span>
        <input type="text" id="nozzle_cali" onchange="input_change()">
        <button class="button is-small goto_btn" onclick="btn_grab_ofs(0, 1)"><-</button>
        <button class="button is-small goto_btn" onclick="btn_grab_ofs(0, -1)">-></button>
        <br>
        <div id="input_search"></div>
        <span style="display: inline-block; min-width: 138px;">Camera delta z:</span>
        <input type="text" id="comp_cam_dz" onchange="input_change()">
        <br>
        <span style="display: inline-block; min-width: 138px;">Comp base z:</span>
        <input type="text" id="comp_base_z" onchange="input_change()">
        <button class="button is-small goto_btn" onclick="btn_goto_z('comp_base_z')">Goto</button>
        <button class="button is-small" onclick="btn_update_z('comp_base_z')">Update</button> &nbsp;|&nbsp;
        <button class="button is-small goto_btn" onclick="btn_goto_z('comp_top_z')">Comp base + cam dz</button> &nbsp;|&nbsp;
        <button class="button is-small goto_btn" onclick="btn_detect_z()">Detect bottom</button>
        <br>
        <span style="display: inline-block; min-width: 138px;">PCB base z:</span>
        <input type="text" id="pcb_base_z" onchange="input_change()">
        <button class="button is-small goto_btn" onclick="btn_goto_z('pcb_base_z')">Goto</button>
        <button class="button is-small" onclick="btn_update_z('pcb_base_z')">Update</button> &nbsp;|&nbsp;
        <button class="button is-small goto_btn" onclick="btn_goto_z('pcb_top_z')">PCB base + cam dz</button> &nbsp;|&nbsp;
        <button class="button is-small goto_btn" onclick="btn_goto_z('inc_camera_dz')">Cur + cam dz</button>
        <button class="button is-small goto_btn" onclick="btn_goto_z('dec_camera_dz')">Cur - cam dz</button>
        
        <div id="input_fiducial">
            <span style="display: inline-block; min-width: 138px; padding-bottom: 0.1em;">Fiducial pcb:</span>
            <input type="text" id="fiducial_pcb0" onchange="input_change()">
            <input type="text" id="fiducial_pcb1" onchange="input_change()">
        </div>
        <div id="input_user"></div>
    </div>

    <br>
    <div class="container">
        <h1 class="title is-size-4">Preload <input type="checkbox" id="preload_en" onchange="input_change()" checked></h1>
        <div class="content" style="font-size: 12px;">
            
            <span style="display: inline-block; min-width: 100px;">Preload search:</span>
            <input type="text" id="pld_search" onchange="input_change()">
            <button class="button is-small goto_btn" onclick="btn_goto_xy('pld_search')">Goto</button>
            <button class="button is-small" onclick="btn_update_xy('pld_search')">Update</button>
            <br>
            <span style="display: inline-block; min-width: 100px;">Preload base z:</span>
            <input type="text" id="pld_base_z" onchange="input_change()">
            <button class="button is-small goto_btn" onclick="btn_goto_z('pld_base_z')">Goto</button>
            <button class="button is-small" onclick="btn_update_z('pld_base_z')">Update</button> &nbsp;|&nbsp;
            <button class="button is-small goto_btn" onclick="btn_goto_z('pld_top_z')">Preload base + cam dz</button>
            <br><br>
            
            Comp offset: <input type="text" id="pld_comp_offset" onchange="input_change()" size="2" value="2"> mm &nbsp;|&nbsp;
            
            Comp space: <input type="text" id="pld_comp_space" onchange="input_change()" size="2" value="1"> unit (4mm) &nbsp;|&nbsp;
            
            Start at: <input type="text" id="pld_start_at" onchange="input_change()" size="2" value="0.5"> unit &nbsp;|&nbsp;
            
            Amount: <input type="text" id="pld_amount" size="2" value="--"> pcs
            <br><br>
            
            Target grid: <input type="text" id="pld_tgt_grid" onchange="input_change()" size="2" value="2, 1.5"> mm &nbsp;|&nbsp;
            
            Rotate:
            <select id="pld_rotate" onchange="input_change()">
                <option value="0" selected>0</option>
                <option value="90">90</option>
                <option value="-90">-90</option>
                <option value="180">180</option>
            </select> &nbsp;|&nbsp;
            
            Count: <input type="text" id="pld_count" size="2" value="0"> &nbsp;
            <button class="button is-small" id="btn_pld_clear">Clear</button>  &nbsp;|&nbsp;
            <button class="button is-small" id="btn_pld_stop" disabled>Stop</button>
            <button class="button is-small" id="btn_pld_run">Run</button>
            
        </div>
    </div>

    <br>
    <div class="container">
        <h1 class="title is-size-4">Components</h1>
        
        Current: <span id="cur_progress">-- / --</span> &nbsp;|&nbsp;
                 <span id="cur_comp">-- -- --</span> <span id="cur_board">--</span> &nbsp;|&nbsp;
                 Height: <span id="cur_height">--</span>
        <br>
        Next: <span id="next_comp">-- -- --</span> &nbsp;|&nbsp; Amount: <span id="next_total">--</span>
        <br>
        
        <div class="content" style="font-size: 12px;">
              <table style="width: 80em;">
                  <thead>
                      <tr>
                          <td style="width: 20em;">Footprint</td> <td>Offset</td>
                          <td style="width: 20em;">Value</td> <td style="width: 10em;">Reference</td>
                          <td style="width: 7em;">X</td> <td style="width: 7em;">Y</td> <td style="width: 7em;">R</td>
                      </tr>
                  </thead>
                  <tbody class="js-sortable-table" id="pos_list">
                  </tbody>
              </table>
        </div>
    </div>

    <br>
    <div class="container" disabled>
        <h1 class="title is-size-4">Offsets</h1>
        <div class="content" style="font-size: 12px;">
            <textarea rows="5" cols="60" id="offset_config" onchange="input_change()"
                      placeholder="wildcard: grab_offs_x, y | pcb_offs_x, y"></textarea>
            <br>
            <button class="button is-small" id="offset_apply">Apply</button> (or refresh page)
            
        </div>
    </div>
    
</section>

<input id="input_file" type="file" style="display:none;">
</body>
<script src="./libs/html5sortable-3dac3ba.min.js" defer></script>
<script src="./libs/msgpack-ygoe-9045d01.min.js" defer></script>
<script type="module" src="./index.js"></script>
</html>
